<template>
  <div class="demo">
    <div class="demo-title">扩展菜单</div>
    <div class="demo-content">
      <Select
        v-model:value="value"
        style="width: 120px"
        :options="items.map((item) => ({ value: item }))"
      >
        <template #dropdownRender="{ menuNode: menu }">
          <component :is="menu" />
          <Divider style="margin: 4px 0" />
          <div
            style="padding: 4px 8px; cursor: pointer"
            @mousedown="(e) => e.preventDefault()"
            @click="addItem"
          >
            <PlusOutlined />
            Add item
          </div>
        </template>
      </Select>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import Divider from '@sscd/divider';
  import Select from '@sscd/select';
  const value = ref('lucy');
  const items = ref(['jack', 'lucy']);
  let index = 0;
  const addItem = () => {
    console.log('addItem');
    items.value.push(`New item ${index++}`);
  };
</script>
